<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:forgeview="http://jboss.org/forge/view"
	xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich"
	template="/resources/scaffold/pageTemplate.xhtml">

	<f:metadata>
		<f:viewParam name="id" value="#{categoriaBean.id}"/>
		<f:event type="preRenderView" listener="#{categoriaBean.retrieve}"/>
	</f:metadata>

	<ui:param name="pageTitle" value="View Categoria"/>

	<ui:define name="header">
		Categoria
	</ui:define>

	<ui:define name="subheader">
		Visualizar Categoria
	</ui:define>

	<ui:define name="footer"/>

	<ui:define name="main">
	
	<script>
		function evalSound(soundobj) {
			document.getElementById('snd').innerHTML='<embed src="/abc/sound/#{categoriaBean.categoria.nome}.mp3"  width="1" height="1"  id="sound1" enablejavascript="true" />';
		}
	</script>
	
		<h:panelGrid columnClasses="label,component,required" columns="3">
			<h:outputLabel for="categoriaBeanCategoriaNome" value="Nome:"/>
			<h:outputText id="categoriaBeanCategoriaNome" value="#{categoriaBean.categoria.nome}"/>
			<h:outputText/>
			<h:outputLabel for="categoriaBeanCategoriaItem" value="Imagem:"/>
			<h:graphicImage value="/image/#{categoriaBean.categoria.nome}.jpg"
			    onclick="javascript:evalSound('sound1');"/>
			<p id="snd"> 
				<embed src="/abc/sound/#{categoriaBean.categoria.nome}.mp3"
			 	 width="1" height="1"  id="sound1" enablejavascript="true" />
			</p>
			
		</h:panelGrid>

		<div class="buttons">
			<h:link value="Voltar" outcome="search" styleClass="btn btn-primary"/> 
			<h:link value="Editar" outcome="create" includeViewParams="true" styleClass="btn btn-primary"/>
			<h:link value="Criar Novo" outcome="create" styleClass="btn btn-primary"/>
		</div>
	</ui:define>

</ui:composition>